<template>
  <ScalablePage>
    <div class="resolution">
      <FirstLevelTitle text="水库数据" more="更多>>>"></FirstLevelTitle>
      <!-- <img class="secondary-img" style="margin-bottom: 5px;" src="@/assets/images/shuiwu/right/you2.png" alt=""> -->
      <secondary-title text="实时出入库流量"></secondary-title>

      <div class="Incoming-outgoing-inventory">
        <div :class="['div-item-1', 'div-item']" style="margin-right: 25px">
          <span class="div-item-cun">{{ total }}亿m<sup>3</sup></span>
          <span class="div-item-title">历年累计总水量</span>
        </div>
        <div :class="['div-item-1', 'div-item']" style="margin-right: 25px">
          <span
            class="div-item-cun"
            :style="{
              color: jinshui >= 20 && jinshui <= 60 ? '#FFFFFF' : 'red',
            }"
          >
            {{ jinshui }}m<sup>3</sup>/h</span
          >
          <span class="div-item-title">进水流量</span>
        </div>
        <div :class="['div-item-1', 'div-item']">
          <span
            class="div-item-cun"
            :style="{ color: chushui <= 10000 ? '#FFFFFF' : 'red' }"
            >{{ chushui }}m<sup>3</sup>/h</span
          >
          <span class="div-item-title">出水流量</span>
        </div>
      </div>

      <div class="PH-turbidity">
        <div>
          <secondary-title text="PH值数据"></secondary-title>
          <div :class="['PH-value']">
            <div
              :style="{
                color:
                  shuiku.phzhi >= 7.5 && shuiku.phzhi <= 8.5 ? 'white' : 'red',
              }"
            >
              {{ shuiku.phzhi }}
            </div>
          </div>
        </div>

        <div style="margin-left: 40px">
          <secondary-title text="浊度数据"></secondary-title>
          <div :class="['current-turbidity']">
            <div
              :style="{
                color:
                  Number(shuiku.zhuodu) >= 3 && Number(shuiku.zhuodu) <= 30
                    ? 'white'
                    : 'red',
              }"
            >
              {{ shuiku.zhuodu }}
            </div>
          </div>
        </div>
      </div>

      <!-- <secondary-title text="告警信息"></secondary-title>
      <div class="alarm-info">
        <div>序号</div>
        <div>位置</div>
        <div>事件类型</div>
      </div> -->
    </div>
    <div class="PH-turbidity">
      <div>
        <secondary-title text="应急预案" more="更多" url="http://111.113.0.230:8066/orca/sys/ssoLogin?username=shuziluansheng&password=ccsw@1234&to=emergency/EmergencyKnowledge"></secondary-title>
        <div class="Emergency-plan">
          <div
            v-for="item in emergencyPlan"
            :key="item.id"
            style="color: #fff; display: flex; align-items: center"
          >
            <img
              style="width: 15px; height: 15px; margin-right: 5px"
              src="@/assets/changcheng/Frame-v2-V2.png"
            />
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 1px 3px;
                margin-top: 0px;
              "
              :class="{ 'Emergency-plan-item': emergencyPlanID === item.id }"
              @click="getEmergencyPlan(item.id, null)"
            >
              {{ item.docName }}
            </div>
          </div>
        </div>
      </div>

      <div style="margin-left: 40px">
        <secondary-title text="应急处置措施"></secondary-title>
        <div class="Emergency-plan">
          <div
            style="color: rgb(132 132 132)"
            v-if="emerResMeasures.length === 0"
          >
            暂无应急处置措施
          </div>
          <div v-else>
            <div
              v-for="item in emerResMeasures"
              :key="item.id"
              style="color: #fff; display: flex; align-items: center"
            >
              <img
                style="width: 15px; height: 15px; margin-right: 5px"
                src="@/assets/changcheng/wanhaoicon.png"
              />
              <div
                style="
                  width: 100%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.docName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, reactive } from "vue";
import { waterApi } from "@/utils/shuiwu/api";
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件
import { shortPolling } from "@/utils/Polling";

const emergencyPlan = ref(
  localStorage.getItem("emergencyPlan")
    ? JSON.parse(localStorage.getItem("emergencyPlan"))
    : []
);

const emerResMeasures = ref([]);
const emergencyPlanID = ref("");

// 登录接口
function ccswLogin() {
  let reg = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      password: "ccsw@1234",
      remember_me: false,
      username: "shuziluansheng",
    }),
  };
  return fetch("http://111.113.0.230:8066/orca/sys/login", reg)
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      return res.result.token;
    });
}

// 应急预案
async function anquanFenXi() {
  const token = await ccswLogin();
  let reg = {
    method: "GET",
    headers: {
      "x-access-token": token,
    },
  };
  fetch(
    "http://111.113.0.230:8066/orca/emergency/emergencyPlanDatabase/allList?docType=2",
    reg
  )
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      emergencyPlan.value = res.result;
      if (res.result.length > 0) {
        localStorage.setItem("emergencyPlan", JSON.stringify(res.result));
        getEmergencyPlan(res.result[0].id, token);
      }
    });
}

// 根据应急预案 ID 获取应急处置措施
async function getEmergencyPlan(id: number | string, token: string) {
  emergencyPlanID.value = id as string;
  const tokens = token || (await ccswLogin());
  let reg = {
    method: "GET",
    headers: {
      "x-access-token": tokens,
    },
  };
  fetch(
    `http://111.113.0.230:8066/orca/emergency/emergencyPlanRelation/list?handleId=${id}&planId=`,
    reg
  )
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      emerResMeasures.value = res.result;
    });
}

const jinshui = ref(0);
const total = ref(0);
const chushui = ref(0);

interface Status {
  color: string;
  text: string;
}

const statusList: Status[] = [
  { color: "blue", text: "优秀" },
  { color: "green", text: "良好" },
  { color: "orange", text: "轻微" },
  { color: "beige", text: "中度" },
  { color: "pink", text: "重度" },
];

const state = reactive({
  shuiku: {
    phzhi: 0,
    zhuodu: 0,
  },
});

let { shuiku } = toRefs(state);

onMounted(() => {
  // ccswLogin();
  anquanFenXi();
  shortPolling(() => getShuiKu(631), 10000);
  shortPolling(() => getBengZu(634), 10000);
  shortPolling(() => getChuShui(642), 10000);
});

async function getShuiKu(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4381) {
        state.shuiku.phzhi = arr[i].value;
      }
      if (arr[i].modelId == 4377) {
        state.shuiku.zhuodu = arr[i].value;
      }
    }
  });
}

async function getChuShui(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let totalnum = 0;
    for (let i = 0; i < arr.length; i++) {
      if (
        arr[i].modelId == 4631 ||
        arr[i].modelId == 4633 ||
        arr[i].modelId == 4634 ||
        arr[i].modelId == 4636 ||
        arr[i].modelId == 4637 ||
        arr[i].modelId == 4638 ||
        arr[i].modelId == 4639 ||
        arr[i].modelId == 4640
      ) {
        totalnum += Number(arr[i].value);
      }
    }
    chushui.value = totalnum;
  });
}

async function getBengZu(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let totalnum = 0,
      zongliuliang = 0;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4387 || arr[i].modelId == 4388) {
        totalnum += Number(arr[i].value);
      }
      if (arr[i].modelId == 4389 || arr[i].modelId == 4390) {
        zongliuliang += Number(arr[i].value);
      }
    }
    const result = Math.floor((zongliuliang / 100000000) * 100) / 100;
    total.value = result;
    jinshui.value = totalnum;
  });
}
</script>

<style lang="less" scoped>
@import "@/assets/common/font.css";

.resolution {
  .First-img {
    width: 324px;
    height: 26px;
  }

  .secondary-img {
    width: 171px;
  }
}

.Incoming-outgoing-inventory {
  display: flex;

  .div-item {
    width: 27%;
  }

  .div-item-warn {
    width: 109px;
    height: 77px;
    position: relative;
    margin-right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: xpf 1.5s infinite;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: red;
      -webkit-mask-image: url("@/assets/images/shuiwu/right/you3.png");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      -webkit-mask-position: center;
      z-index: 0;
    }

    .div-item-title {
      position: relative;
      font-size: 10px;
      color: #ff0000;
      margin-top: 18px;
      z-index: 1;
    }

    .div-item-cun {
      position: relative;
      display: block;
      text-align: center;
      color: #ff0000;
      font-size: 11px;
      line-height: 1;
      margin-top: 40px; // 微调 vertical 居中
      z-index: 1;
    }
  }

  .div-item-1 {
    width: 109px;
    height: 77px;
    position: relative;
    margin-right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // 遮罩层：不影响文字
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("@/assets/images/shuiwu/right/you3.png");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 0;
    }

    .div-item-title {
      position: relative;
      font-size: 10px;
      color: #ffffff;
      margin-top: 18px;
      z-index: 1;
    }

    .div-item-cun {
      position: relative;
      display: block;
      text-align: center;
      color: #ffffff;
      font-size: 11px;
      line-height: 1;
      margin-top: 40px;
      z-index: 1;
    }
  }
}

.PH-turbidity {
  display: flex;
  margin-top: 20px;

  .PH-value {
    width: 226px;
    height: 104px;
    background-image: url(@/assets/images/shuiwu/right/20250618013044.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    div {
      position: absolute;
      top: 48px;
      left: 163px;
      color: #fff;
      font-size: 16px;
      font-family: YSBT;
    }
  }

  .PH-value-warn {
    width: 226px;
    height: 104px;
    position: relative;
    animation: xpf 1.5s infinite;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: red;
      -webkit-mask-image: url("@/assets/images/shuiwu/right/20250618013044.png");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      -webkit-mask-position: center;
      z-index: 0;
    }

    div {
      position: absolute;
      top: 48px;
      left: 163px;
      color: #ff0000;
      font-size: 16px;
      font-family: YSBT;
    }
  }

  .current-turbidity {
    width: 226px;
    height: 116px;
    background-image: url(@/assets/images/shuiwu/right/you9.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    div {
      position: absolute;
      top: 35px;
      left: 83px;
      color: #fff;
      font-size: 16px;
      font-family: YSBT;
    }
  }

  .current-turbidity-warn {
    width: 226px;
    height: 116px;
    position: relative;
    animation: xpf 1.5s infinite;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: red;
      -webkit-mask-image: url("@/assets/images/shuiwu/right/you9.png");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      z-index: 0;
    }

    div {
      position: absolute;
      top: 35px;
      left: 83px;
      color: #ff0000;
      font-size: 16px;
      font-family: YSBT;
    }
  }
}

.alarm-info {
  font-size: 13px;
  color: #e5f3ff;
  display: flex;
  column-gap: 80px;
}

.Emergency-plan {
  width: 226px;
  height: 154px;
  overflow: scroll !important;
  font-size: 10px;
  position: relative;
  font-weight: 600;
  line-height: 20px;
}

/* 滚动条样式 */
.Emergency-plan::-webkit-scrollbar {
  width: 0px !important; /*  设置纵轴（y轴）轴滚动条 */
  height: 0px !important; /*  设置横轴（x轴）轴滚动条 */
}
/* 滚动条滑块（里面小方块） */
.Emergency-plan::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
/* 滚动条轨道 */
.Emergency-plan::-webkit-scrollbar-track {
  border-radius: 0 !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

/* hover时显色 */
.Emergency-plan:hover::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.Emergency-plan-item {
  background-color: #008aff;
  cursor: pointer;
  border-radius: 2px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // column-gap: 10px;
}

// .Emergency-plan-item:hover {
//   background-color: #008aff;
// }

@keyframes xpf {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>